<template>
    <div>
        <van-tabs v-model="active" color="#00D2C3" title-active-color="#00D2C3" >
            <van-tab title="全部"></van-tab>
            <van-tab title="待发货"></van-tab>
            <van-tab title="待收货"></van-tab>
            <van-tab title="待评价"></van-tab>
            <van-tab title="我的订单"></van-tab>
        </van-tabs>
        <div v-if="list.length">
            <div>
                <van-icon name="shop-o" class="ico" size="18px"/>
                <span class="storename">店铺名称：</span>
                <span>噜噜HN百货 (CQ)  </span>
                <van-button round type="info" color="#FF5500" class="btn">已支付</van-button>
            </div>
            <ul v-for="(item,index) in list" :key="index">
                <li class="firstli">
                    <img :src="src+item.goodsImg">
                </li>
                <li class="secondli">
                    {{item.goodsName}}
                </li>
                <li class="thirdli">
                    ￥<span>{{item.goodsPrice}}</span>元
                    <h4>X<span>1</span></h4>
                    <span class="moreinfo">查看订单信息...</span>
                </li>
                
            </ul>
        </div>
        <div v-if="!list.length">
            <img src="https://www.160dyf.com/Public/vue2/static/img/success@3x.d7960d5.png" class="showimg">
            <p>没有更多了哦~</p>
       </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                active:4,
                src:"https://www.160dyf.com/",
            }
        },
        computed: {
            list() {
                return this.$store.state.detail.list 
            },
            Allprice(){
                return this.$store.state.detail.Allprice
            },
        },
    }
</script>

<style lang="less" scoped>
.showimg{
    width: 200px;
    height: 200px;
    margin:10px auto;
}
p{
    text-align: center;
    font-size: 14px;
    color: #999;
}
.ico{
    margin: 10px 10px 5px 15px;
}
.storename{
    font-size: 16px;
    color: #333333;
    margin-top: 10px;
}
.btn{
    margin-left: 30px;
    padding: 0 20px;
    height: 30px;
   margin-bottom: 10px;
}
.surebtn{
    margin-top: 20px;
    margin-left: 60%;
}
ul{
    display: flex;
    >.firstli{
        width: 25%;
    }
    >.secondli{
        width: 45%;
    }
    >.thirdli{
        flex: 1;
        margin-left: 20px;
        color: #FF9F4F;
        font-size: 16px;
    }
}

li>img{
    margin-left: 15px;
    width: 70px;
    height: 70px;
}
h4{
    color: #333;
    margin-left: 70px;
}
h5{
    margin-left:100px;
}
.remove{
    margin-right: 10px;
}
.moreinfo{
    background: #999;
    font-size: 12px;
    color: #fffeef;
    padding:  0 5px;
    margin-left: -10px;
}
</style>